<template>
  <div class="data-import">
    <div class="toolbar">
      <button class="import-btn" @click="triggerFileInput">
        <i class="icon">📥</i>
        导入数据
      </button>
      <input
        type="file"
        ref="fileInput"
        multiple
        accept="image/*"
        @change="handleFileSelect"
        style="display: none"
      >
    </div>

    <div class="content-area">
      <!-- 左侧导入列表 -->
      <div class="import-list">
        <div class="list-header">
          <h3>导入队列</h3>
          <div class="header-actions">
            <span class="total-count">共 {{ files.length }} 个文件</span>
            <button 
              class="clear-btn" 
              @click="clearFiles"
              v-if="files.length"
            >
              清空
            </button>
          </div>
        </div>

        <div class="file-list" v-if="files.length">
          <div v-for="file in files" 
               :key="file.id"
               class="file-item"
               :class="{ 'is-error': file.error }">
            <div class="file-info">
              <img 
                v-if="file.preview" 
                :src="file.preview" 
                class="file-preview"
                alt="预览"
              >
              <div class="file-details">
                <div class="file-name">{{ file.name }}</div>
                <div class="file-meta">
                  {{ formatSize(file.size) }} | {{ file.type }}
                </div>
              </div>
            </div>
            <div class="file-status">
              <template v-if="file.error">
                <span class="error-text">{{ file.error }}</span>
                <button class="retry-btn" @click="retryFile(file)">重试</button>
              </template>
              <template v-else-if="file.uploading">
                <div class="progress-bar">
                  <div 
                    class="progress" 
                    :style="{ width: file.progress + '%' }"
                  ></div>
                </div>
                <span class="progress-text">{{ file.progress }}%</span>
              </template>
              <template v-else>
                <span class="success-text">✓ 已完成</span>
              </template>
            </div>
          </div>
        </div>

        <div v-else class="empty-state">
          <div class="empty-icon">📁</div>
          <p>拖拽文件到此处或点击上方按钮导入</p>
        </div>
      </div>

      <!-- 右侧导入设置 -->
      <div class="import-settings">
        <h3>导入设置</h3>
        <div class="settings-form">
          <div class="form-group">
            <label>数据类型</label>
            <select v-model="importSettings.type">
              <option value="image">图片数据</option>
              <option value="annotation">标注数据</option>
              <option value="mixed">混合数据</option>
            </select>
          </div>

          <div class="form-group">
            <label>目标数据集</label>
            <select v-model="importSettings.dataset">
              <option value="default">默认数据集</option>
              <option value="training">训练集</option>
              <option value="validation">验证集</option>
              <option value="testing">测试集</option>
            </select>
          </div>

          <div class="form-group">
            <label>自动处理</label>
            <div class="checkbox-group">
              <label class="checkbox">
                <input 
                  type="checkbox"
                  v-model="importSettings.autoProcess"
                >
                导入后自动处理
              </label>
              <label class="checkbox">
                <input 
                  type="checkbox"
                  v-model="importSettings.autoAnnotate"
                >
                自动标注
              </label>
            </div>
          </div>

          <div class="form-actions">
            <button 
              class="start-btn"
              :disabled="!files.length"
              @click="startImport"
            >
              开始导入
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const fileInput = ref(null)
const files = ref([])
const importSettings = reactive({
  type: 'image',
  dataset: 'default',
  autoProcess: false,
  autoAnnotate: false
})

const triggerFileInput = () => {
  fileInput.value?.click()
}

const handleFileSelect = (event) => {
  const selectedFiles = Array.from(event.target.files)
  selectedFiles.forEach(file => {
    // 创建文件预览
    const reader = new FileReader()
    reader.onload = (e) => {
      files.value.push({
        id: Date.now() + Math.random(),
        name: file.name,
        size: file.size,
        type: file.type,
        preview: e.target.result,
        progress: 0,
        uploading: false,
        error: null
      })
    }
    reader.readAsDataURL(file)
  })
  event.target.value = ''
}

const formatSize = (bytes) => {
  if (bytes < 1024) return bytes + ' B'
  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
  return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
}

const clearFiles = () => {
  files.value = []
}

const retryFile = (file) => {
  file.error = null
  file.progress = 0
  file.uploading = true
  // 模拟上传进度
  simulateUpload(file)
}

const simulateUpload = (file) => {
  let progress = 0
  const interval = setInterval(() => {
    progress += Math.random() * 30
    if (progress >= 100) {
      progress = 100
      clearInterval(interval)
      file.uploading = false
    }
    file.progress = Math.min(Math.round(progress), 100)
  }, 500)
}

const startImport = () => {
  files.value.forEach(file => {
    if (!file.uploading && !file.error) {
      file.uploading = true
      simulateUpload(file)
    }
  })
}
</script>

<style scoped>
.data-import {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.toolbar {
  margin-bottom: 20px;
}

.import-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.import-btn:hover {
  background-color: #096dd9;
}

.icon {
  font-size: 18px;
}

.content-area {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  background: white;
  border-radius: 8px;
  overflow: hidden;
}

.import-list {
  padding: 20px;
  background: #f8f8f8;
  display: flex;
  flex-direction: column;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.total-count {
  color: #666;
}

.clear-btn {
  padding: 4px 8px;
  background: none;
  border: none;
  color: #ff4d4f;
  cursor: pointer;
}

.clear-btn:hover {
  text-decoration: underline;
}

.file-list {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.file-item {
  background: white;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.file-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.file-preview {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
}

.file-name {
  font-weight: 500;
  margin-bottom: 4px;
}

.file-meta {
  font-size: 12px;
  color: #666;
}

.file-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-bar {
  width: 100px;
  height: 4px;
  background: #f0f0f0;
  border-radius: 2px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background: #1890ff;
  transition: width 0.3s;
}

.progress-text {
  font-size: 12px;
  color: #666;
  min-width: 40px;
  text-align: right;
}

.error-text {
  color: #ff4d4f;
  font-size: 12px;
}

.success-text {
  color: #52c41a;
}

.retry-btn {
  padding: 2px 8px;
  background: none;
  border: 1px solid #ff4d4f;
  color: #ff4d4f;
  border-radius: 4px;
  cursor: pointer;
}

.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.import-settings {
  padding: 20px;
  border-left: 1px solid #e8e8e8;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  color: #333;
  font-weight: 500;
}

select {
  padding: 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: white;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  cursor: pointer;
}

.form-actions {
  margin-top: 20px;
}

.start-btn {
  width: 100%;
  padding: 12px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.start-btn:hover {
  background: #096dd9;
}

.start-btn:disabled {
  background: #d9d9d9;
  cursor: not-allowed;
}
</style> 